<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>概况</title>
		<link rel="stylesheet" type="text/css" href="css/main.css" />
	</head>
	<body>
		<div class="homebox">
			
			<div class="homehead">
				<div class="homeheadmain">
					<div class="homeheadtitle">代理数量</div>
					<div class="homeheadinfo">
						<div id="agentstatistics" style="height: 230px;"></div>
						<div class="agentnum">
							<p style="float: left;width: 50%;">一级代理<span id="levelagent">1</span></p>
							<p style="float: right;width: 50%;text-align: right;">二级代理<span id="levelagent">1</span></p>
						</div>
						<div class="clear"></div>
						
						<div class="headbottomnum">
							<p class="headtotal">677</p>
							<p class="headagect">代理总数</p>
						</div>
						
					</div>
				</div>
				
				<div class="homeheadmain">
					<div class="homeheadtitle">会员总数</div>
					<div class="homeheadinfo">
						<div class="membersbox" >
							<img src="images/left/adminhead.png" class="membersimg" />
							<p>Total number of members</p>
						</div>
						

						<div class="headbottomnum">
							<p class="headtotal">6737</p>
							<p class="headagect">代理总数</p>
						</div>
						
					</div>
				</div>
				
				<div class="homeheadmain">
					<div class="homeheadtitle">订单数量</div>
					<div class="homeheadinfo">
						<div class="headordernum">
							<p>2443</p>
						</div>
						
						<div style="height: 300px;" id="ordernum"></div>
						
					</div>
				</div>
				
				<div class="homeheadmain">
					<div class="homeheadtitle">设备数量</div>
					
					<div class="homeheadinfo">
						<div class="headordernum">
							<p>2443</p>
						</div>
						
						<div style="height: 300px;" id="devicenum"></div>
						
					</div>
					
				</div>
				
				<div class="clear"></div>
			</div>
		
			<div class="statistics" id="orderdata">
				
			</div>
			
			
			<div class="statistics" id="devicedata">
				
			</div>
			
		</div>



	<script src="http://www.jq22.com/jquery/jquery-1.9.1.js"></script>
	<script src="https://img.hcharts.cn/highstock/highstock.js"></script>
	<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
	<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>

	</body>
	
	<script>
		/*代理*/
		var chart = null;
		$(function () {
			var num=196
			
		    $('#agentstatistics').highcharts({
		        chart: {
		            plotBackgroundColor: null,
		            plotBorderWidth: null,
		            plotShadow: false,
		            spacing : [10,30 ,10, 30]
		        },
		        title: {
		            floating:true,
		            text: '<p>'+ num +'</p><br><p>新增代理</p>'
		        },
		        tooltip: {
		            pointFormat: false
		        },
		        colors: ['#00B0D9', '#83E3FF', '#2DC0E8'],
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: 'pointer',
		                dataLabels: {
		                    enabled: false,
		                    format: '<b>{point.name}</b>: {point.percentage:.1f} ',
		                    style: {
		                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
		                    }
		                },
		                point: {
		                    events: {
		                        mouseOver: function(e) {  // 鼠标滑过时动态更新标题
		                            // 标题更新函数，API 地址：https://api.hcharts.cn/highcharts#Chart.setTitle
		                            chart.setTitle({
		                                text: e.target.name+ '\t'+ e.target.y 
		                            });
		                        }
		                 
		                    }
		                },
		            }
		        },
		        series: [{
		            type: 'pie',
		            innerSize: '80%',
		            name: '市场份额',
		            data: [
		               ["一级代理",45.0],["二级代理",45.0],["经理",10.0]
		             
		            ]
		        }]
		    }, function(c) {
		        // 环形图圆心
		        var centerY = c.series[0].center[1],
		            titleHeight = parseInt(c.title.styles.fontSize);
		        c.setTitle({
		            y:centerY + titleHeight/2
		        });
		        chart = c;
		    });
		});
		
		
		/*订单数量统计*/
		var chart = Highcharts.chart('ordernum', {
		    colors: ['#F9BC86', '#00D097'],
		    title:false,
		    subtitle: {
		        text: false
		    },
		    yAxis: {
		        title: {
		            text: false
		        }
		    },
		    legend: {
		        layout: 'vertical',
		        align: 'bottom',
		        verticalAlign: 'middle'
		    },
		    plotOptions: {
		        series: {
		            label: {
		                connectorAllowed: false
		            },
		            pointStart: 2010
		        }
		    },
		    series: [{
		        name: '本周',
		        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
		    },{
		        name: '上周',
		        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
		    }],
		    responsive: {
		        rules: [{
		            condition: {
		                maxWidth: 500
		            },
		            chartOptions: {
		                legend: {
		                    layout: 'horizontal',
		                    align: 'center',
		                    verticalAlign: 'bottom'
		                }
		            }
		        }]
		    }
		});
	/*订单数量统计end*/
	
		
	/*设备数量统计*/
		var chart = Highcharts.chart('devicenum', {
		    colors: ['#FF4B78', '#35C4F9'],
		    title:false,
		    subtitle: {
		        text: false
		    },
		    yAxis: {
		        title: {
		            text: false
		        }
		    },
		    legend: {
		        layout: 'vertical',
		        align: 'bottom',
		        verticalAlign: 'middle'
		    },
		    plotOptions: {
		        series: {
		            label: {
		                connectorAllowed: false
		            },
		            pointStart: 2010
		        }
		    },
		    series: [{
		        name: '本周',
		        data: [43934, 52503, 119931, 137133, 154175]
		    },{
		        name: '上周',
		        data: [8105, 11248, 8989, 11816, 18274, 18111]
		    }],
		    responsive: {
		        rules: [{
		            condition: {
		                maxWidth: 500
		            },
		            chartOptions: {
		                legend: {
		                    layout: 'horizontal',
		                    align: 'center',
		                    verticalAlign: 'bottom'
		                }
		            }
		        }]
		    }
		});
	/*设备数量统计end*/


	/*订单数据*/
	
	var chart = Highcharts.chart('orderdata', {
	    title: {
	        text: '订单列表'
	    },
	    subtitle: {
	        text: false
	    },
	    yAxis: {
	        title: {
	            text: false
	        }
	    },
	    legend: {
	        layout: 'vertical',
	        align: 'right',
	        verticalAlign: 'middle'
	    },
	    plotOptions: {
	        series: {
	            label: {
	                connectorAllowed: false
	            },
	            pointStart: 2010
	        }
	    },
	    series: [{
	        name: '安装，实施人员',
	        data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
	    }, {
	        name: '工人',
	        data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
	    }, {
	        name: '销售',
	        data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
	    }, {
	        name: '项目开发',
	        data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
	    }, {
	        name: '其他',
	        data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
	    }],
	    responsive: {
	        rules: [{
	            condition: {
	                maxWidth: 500
	            },
	            chartOptions: {
	                legend: {
	                    layout: 'horizontal',
	                    align: 'center',
	                    verticalAlign: 'bottom'
	                }
	            }
	        }]
	    }
	});


	
	/*订单数据end*/

	
	/*设备激活数据*/
	
	  $('#devicedata').highcharts({
        chart: {
            type: 'areaspline'
        },
        title: {
            text: "设备激活数量",
             align: 'left'
        },
        legend: {
            layout: 'vertical',
            align: 'center',
            verticalAlign: 'top',
            x: 0,
            y: -5,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            categories: [
                '周一',
                '周二',
                '周三',
                '周四',
                '周五',
                '周六',
                '周日'
            ]
            
        },
        yAxis: {
            title: {
                text: false
            }
        },
        tooltip: {
            shared: true,
            valueSuffix: ' 单位'
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0.5
            }
        },
        series: [{
            name: '激活',
            data: [0, 4, 3, 5, 4, 10, 12]
        }]
    });

	
	/*设备激活数据end*/
	


	</script>
	
</html>
